<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 自定义组件，标题 -->
      <PageTitle :show-before="true">
        <template v-slot:before>
          <h2>{{ $t('route.level') }}</h2>
        </template>
        <template v-slot:after>
          <el-button class="filter-item" size="medium" style="margin-left: 10px;" type="primary" icon="el-icon-edit" :disabled="!checkPermission('level-add')" @click="addOrEidt('add',0)">{{ $t('button.add') }}</el-button>
        </template>
      </PageTitle>
      <!-- 数据表 -->
      <el-table v-loading="downloadLoading" border :data="list" max-height="650px" style="margin-top: 20px;">
        <el-table-column label="ID" prop="id" sortable="custom" width="60" />
        <el-table-column :label="$t('table.ForeignLanguageName')" prop="name" />
        <el-table-column :label="$t('table.ChName')" prop="sub_name" />
        <el-table-column :label="$t('table.Upgradecriteria')" prop="up_ordermoney">
          <template slot-scope="{row}">
            <div v-if="row.up_ordermoney==='0'&&row.up_rechargemoney==='0'">{{ $t('prompt.noupgrades') }}</div>
            <div v-else>{{ $t('prompt.Orderamount') }}¥{{ row.up_ordermoney }} {{ $t('prompt.orrecharge') }}¥{{ row.up_rechargemoney }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.Commissionpercentage')" prop="created_at">
          <template slot-scope="{row}">
            <template v-if="row.commissiontype===1">
              <div v-if="row.can_agent===0">{{ $t('prompt.Nodistribution') }}</div>
              <div v-else-if="row.can_agent===1">¥{{ row.commission1 }}</div>
              <div v-else-if="row.can_agent===2">¥{{ row.commission1 }} / ¥{{ row.commission2 }}</div>
              <div v-else-if="row.can_agent===3">¥{{ row.commission1 }} / ¥{{ row.commission2 }} / ¥{{ row.commission3 }}</div>
            </template>
            <template v-if="row.commissiontype===0">
              <div v-if="row.can_agent===0">{{ $t('prompt.Nodistribution') }}</div>
              <div v-else-if="row.can_agent===1">{{ row.commission1 }}%</div>
              <div v-else-if="row.can_agent===2">{{ row.commission1 }}% / {{ row.commission2 }}%</div>
              <div v-else-if="row.can_agent===3">{{ row.commission1 }}% / {{ row.commission2 }}% / {{ row.commission3 }}%</div>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="sort" :label="$t('table.sort')" width="250">
          <template slot-scope="{row}">
            <template v-if="row.isedit">
              <el-input v-model="row.sort" class="edit-input" size="small" style="width: 50%;" />
              <el-button
                style="margin-left: 10px;"
                class="cancel-btn"
                size="small"
                icon="el-icon-refresh"
                type="warning"
                @click="confirmEdit(row)"
              >
                {{ $t('button.confirm') }}
              </el-button>
            </template>
            <span v-else>{{ row.sort }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.actions')" align="center" width="380" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button icon="el-icon-edit" type="primary" size="mini" :disabled="!checkPermission('level-edit')" @click="addOrEidt('edit',row)">{{ $t('button.edit') }}</el-button>
            <el-button v-if="row.isedit" type="warning" size="mini" @click="cancelEdit(row)">
              {{ $t('button.cancel') }}
            </el-button>
            <el-button v-else type="warning" size="mini" :disabled="!checkPermission('level-set')" @click="paixu(row)">
              {{ $t('table.sort') }}
            </el-button>
            <el-button icon="el-icon-delete" type="dang er" size="mini" :disabled="!checkPermission('level-del')" @click="delData(row.id)">{{ $t('button.delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" align="middle" style="margin-top:20px">
        <el-pagination background layout="total,prev,pager,next" :total="count" :page-size="query.limit" :current-page="query.page" @current-change="changPage" />
      </el-row>
    </div>
    <!-- 添加 -->
    <el-dialog :title="dialogTitle" :visible="showDialog" top="40px" @opened="openDialog" @close="btnCanle">
      <div class="shopOrder-dialog">
        <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="180px">
          <el-form-item :label="$t('table.ForeignLanguageName')">
            <el-input v-model="formData.name" :placeholder="$t('table.enterThe')+' '+$t('table.ForeignLanguageName')" style="width:50%" />
          </el-form-item>
          <el-form-item :label="$t('table.ChName')">
            <el-input v-model="formData.sub_name" :placeholder="$t('table.enterThe')+' '+$t('table.ChName')" style="width:50%" />
          </el-form-item>
          <el-form-item :label="$t('table.Levelicon')">
            <ImageUpload ref="staffPhoto" />
          </el-form-item>
          <el-form-item :label="$t('table.Leveldiscount')">
            <el-input v-model="formData.discount" style="width:10%" />
            <label class="tip_ljm">{{ $t('prompt.Discount') }}</label>
          </el-form-item>
          <el-form-item :label="$t('table.Headcountlimit')">
            <el-input v-model.number="formData.maxnum" style="width:10%" />
            <label class="tip_ljm">{{ $t('prompt.Headcountlimit') }}</label>
          </el-form-item>
          <el-form-item :label="$t('table.can_up')">
            <el-radio v-model.number="formData.can_up" :label="0">{{ $t('filters.no') }}</el-radio>
            <el-radio v-model.number="formData.can_up" :label="1">{{ $t('filters.yes') }}</el-radio>
          </el-form-item>
          <el-form-item v-if="formData.can_up===1" :label="$t('table.Upgradecriteria')">
            <el-radio v-model.number="formData.up_condition_show" :label="0">{{ $t('table.hide') }}</el-radio>
            <el-radio v-model.number="formData.up_condition_show" :label="1">{{ $t('table.show') }}</el-radio>
            <div>
              <label style="margin-right: 10px;">{{ $t('prompt.Orderamount') }}</label><el-input v-model="formData.up_ordermoney" style="width:10%" />
              <label style="margin-right: 10px;margin-left: 10px;">{{ $t('prompt.orrecharge') }}</label><el-input v-model="formData.up_rechargemoney" style="width:10%" />
            </div>
          </el-form-item>
          <el-form-item :label="$t('table.Upgraderewardpoints')">
            <el-input v-model.number="formData.up_give_score" style="width:10%" />
          </el-form-item>
          <el-form-item :label="$t('table.Upgraderewardbalance')">
            <el-input v-model="formData.up_give_money" style="width:10%" />
          </el-form-item>
          <el-form-item :label="$t('table.Upgraderewardcommission')">
            <el-input v-model="formData.up_give_commission" style="width:10%" />
          </el-form-item>
          <el-form-item :label="$t('table.uplinecommission')">
            <el-input v-model="formData.up_give_parent_money" style="width:10%" />
          </el-form-item>
          <el-form-item :label="$t('table.Distributionprivileges')">
            <el-radio v-model.number="formData.can_agent" :label="0">{{ $t('filters.Nopermission') }}</el-radio>
            <el-radio v-model.number="formData.can_agent" :label="1">{{ $t('filters.One_leveldistribution') }}</el-radio>
            <el-radio v-model.number="formData.can_agent" :label="2">{{ $t('filters.two_leveldistribution') }}</el-radio>
            <el-radio v-model.number="formData.can_agent" :label="3">{{ $t('filters.three_leveldistribution') }}</el-radio>
          </el-form-item>
          <el-form-item v-if="formData.can_agent!==0" :label="$t('table.Commissionmethod')">
            <el-radio-group v-model.number="formData.commissiontype" @change="radio">
              <el-radio :label="0">{{ $t('table.percentage') }}</el-radio>
              <el-radio :label="1">{{ $t('table.FixedValue') }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="formData.can_agent!==0" :label="$t('table.Commissionamount')">
            <label style="margin-right: 10px;">{{ $t('filters.One_leveldistribution') }}{{ danwei }}</label><el-input v-model="formData.commission1" style="width:10%" />
            <label v-if="formData.can_agent>1" style="margin-right: 10px;margin-left: 10px;">{{ $t('filters.two_leveldistribution') }}{{ danwei }}</label><el-input v-if="formData.can_agent>1" v-model="formData.commission2" style="width:10%" />
            <label v-if="formData.can_agent>2" style="margin-right: 10px;margin-left: 10px;">{{ $t('filters.three_leveldistribution') }}{{ danwei }}</label><el-input v-if="formData.can_agent>2" v-model="formData.commission3" style="width:10%" />
          </el-form-item>
          <el-form-item v-if="formData.can_agent!==0" :label="$t('table.Referralpoints')">
            <label style="margin-right: 10px;">{{ $t('filters.One_leveldistribution') }}</label><el-input v-model.number="formData.score1" style="width:10%" />
            <label v-if="formData.can_agent>1" style="margin-right: 10px;margin-left: 10px;">{{ $t('filters.two_leveldistribution') }}</label><el-input v-if="formData.can_agent>1" v-model.number="formData.score2" style="width:10%" />
            <label v-if="formData.can_agent>2" style="margin-right: 10px;margin-left: 10px;">{{ $t('filters.three_leveldistribution') }}</label><el-input v-if="formData.can_agent>2" v-model.number="formData.score3" style="width:10%" />
            <label style="margin-right: 10px;margin-left: 10px;">{{ $t('table.Maximumlimit') }}</label><el-input v-model.number="formData.scoremax" style="width:10%" />
            <div>
              <label class="tip_ljm">{{ $t('prompt.Rewardpoints') }}</label>
            </div>
          </el-form-item>
          <el-form-item :label="$t('table.Levelvalidityperiod')">
            <el-input v-model.number="formData.yxqdate" style="width:10%" />
            <label class="tip_ljm">{{ $t('prompt.levelbefore') }}</label>
          </el-form-item>
          <el-form-item :label="$t('table.Privilegedescription')">
            <RichText ref="child" :values="formData.explain" />
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="btnCanle">{{ $t('button.cancel') }}</el-button>
        <el-button type="primary" @click="btnOk">{{ $t('button.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getLevelList, addLevel, delLevel, sortLevel } from '@/api/user'
export default ({
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        2: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: [],
      downloadLoading: false,
      statusData: [{
        id: 1,
        value: this.$t('table.normal')
      },
      {
        id: 2,
        value: this.$t('table.deactivate')
      }],
      query: {
        id: undefined,
        name: '',
        sub_name: '',
        aid: 1,
        page: 1,
        limit: 10
      },
      count: 0,
      dialogTitle: this.$t('button.add'),
      formData: {
        aid: 1,
        id: undefined,
        name: '',
        sub_name: '',
        icon: '',
        discount: 10,
        maxnum: 0,
        can_up: 0,
        up_condition_show: 0,
        up_ordermoney: 0,
        up_rechargemoney: 0,
        up_give_score: 0,
        up_give_money: 0,
        up_give_commission: 0,
        up_give_parent_money: 0,
        can_agent: 0,
        commissiontype: 0,
        commission1: 0,
        commission2: 0,
        commission3: 0,
        score1: 0,
        score2: 0,
        score3: 0,
        scoremax: 0,
        yxqdate: 0,
        explain: ''
      },
      rules: {
        name: [{ required: true, message: this.$t('table.name') + this.$t('prompt.noEmpty'), trigger: 'blur' }],
        status: [{ required: true, message: this.$t('table.state') + this.$t('prompt.noEmpty'), trigger: 'blur' }]
      },
      showDialog: false,
      danwei: '(%)'
    }
  },
  created() {
    // 获取userid
    this.getist()
  },
  methods: {
    radio(e) {
      if (e === 0) {
        this.danwei = '(%)'
      } else {
        this.danwei = '(R$)'
      }
    },
    // 获取商户分了列表
    async getist() {
      this.downloadLoading = true
      const { count, list } = await getLevelList(this.query)
      this.count = count
      // 给数组对象使用map循环添加新属性
      const lists = list.map((item, index) => {
        return Object.assign(item, { isedit: false })
      })
      this.list = lists
      this.downloadLoading = false
    },
    // 点击展开新增修改
    addOrEidt(type, row) {
      if (type === 'add') {
        this.dialogTitle = this.$t('button.add')
        this.showDialog = true
        this.$nextTick(() => {
          this.$refs['ruleForm'].clearValidate()
        })
      } else if (type === 'edit') {
        this.dialogTitle = this.$t('button.edit')
        this.formData.id = row.id
        this.formData.name = row.name
        this.formData.sub_name = row.sub_name
        this.formData.icon = row.icon
        this.formData.discount = row.discount
        this.formData.maxnum = row.maxnum
        this.formData.can_up = row.can_up
        this.formData.up_condition_show = row.up_condition_show
        this.formData.up_ordermoney = row.up_ordermoney
        this.formData.up_rechargemoney = row.up_rechargemoney
        this.formData.up_give_score = row.up_give_score
        this.formData.up_give_money = row.up_give_money
        this.formData.up_give_commission = row.up_give_commission
        this.formData.up_give_parent_money = row.up_give_parent_money
        this.formData.can_agent = row.can_agent
        this.formData.commissiontype = row.commissiontype
        this.formData.commission1 = row.commission1
        this.formData.commission2 = row.commission2
        this.formData.commission3 = row.commission3
        this.formData.score1 = row.score1
        this.formData.score2 = row.score2
        this.formData.score3 = row.score3
        this.formData.scoremax = row.scoremax
        this.formData.yxqdate = row.yxqdate
        this.formData.explain = row.explain
        this.radio(row.commissiontype)
        this.showDialog = true
        this.$nextTick(() => {
          this.$refs['ruleForm'].clearValidate()
        })
      }
    },
    // 点击确定时
    async btnOk() {
      try {
        // 校验整个表单
        await this.$refs.ruleForm.validate()
        // 读取上传组件的数据
        const fileList = this.$refs.staffPhoto.fileList
        // 循环判断是否已经完成全部上传
        if (fileList.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        this.formData = { ...this.formData, icon: fileList && fileList.length ? fileList[0].url : '' }
        // 获取富文本编辑内容
        const oldProcedure = this.$refs.child.getVal()
        this.formData.explain = oldProcedure
        // 格式字段
        this.formData.discount = parseFloat(this.formData.discount)
        this.formData.up_ordermoney = parseFloat(this.formData.up_ordermoney)
        this.formData.up_rechargemoney = parseFloat(this.formData.up_rechargemoney)
        this.formData.up_give_money = parseFloat(this.formData.up_give_money)
        this.formData.up_give_commission = parseFloat(this.formData.up_give_commission)
        this.formData.up_give_parent_money = parseFloat(this.formData.up_give_parent_money)
        this.formData.commission1 = parseFloat(this.formData.commission1)
        this.formData.commission2 = parseFloat(this.formData.commission2)
        this.formData.commission3 = parseFloat(this.formData.commission3)
        // 调用新增接口
        await addLevel(this.formData)
        // 更新数据
        this.getist()
        this.btnCanle()
        this.$message.success(this.$t('prompt.success'))
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 删除管理员
    async delData(e) {
      const data = {
        id: e
      }
      try {
        await this.$confirm(this.$t('prompt.deleteit'))
        await delLevel(data)
        this.getist()
        this.$message.success(this.$t('prompt.deletesuccess'))
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 取消重置原来的数据
    btnCanle() {
      this.formData = {
        id: undefined,
        aid: 1,
        name: '',
        sub_name: '',
        icon: '',
        discount: 10,
        maxnum: 0,
        can_up: 0,
        up_condition_show: 0,
        up_ordermoney: 0,
        up_rechargemoney: 0,
        up_give_score: 0,
        up_give_money: 0,
        up_give_commission: 0,
        up_give_parent_money: 0,
        can_agent: 0,
        commissiontype: 0,
        commission1: 0,
        commission2: 0,
        commission3: 0,
        score1: 0,
        score2: 0,
        score3: 0,
        scoremax: 0,
        yxqdate: 0,
        explain: ''
      }
      this.danwei = '(%)'
      this.$refs.ruleForm.clearValidate()// 重置校验结果
      this.showDialog = false
    },
    // 给图片赋值
    openDialog() {
      if (this.formData.icon) {
        this.$refs.staffPhoto.fileList = [{ url: this.formData.icon, upload: true }]
      }
      if (this.formData.explain) {
        this.$refs.child.content = this.formData.explain
      }
    },
    // 点击排序
    paixu(row) {
      row.isedit = true
    },
    // 取消排序
    cancelEdit(row) {
      row.isedit = false
    },
    // 确认排序
    async confirmEdit(row) {
      const data = {
        id: row.id,
        sort: parseInt(row.sort)
      }
      row.isedit = false
      try {
        await sortLevel(data)
        this.$message.success(this.$t('prompt.paixuSuccess'))
        this.getist()
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 搜索
    search() {
      this.query.page = 1
      this.getist()
    },
    // 分页
    changPage(newPage) {
      this.query.page = newPage
      this.getist()
    }
  }
})
</script>
<style lang="scss">
.table-img{
  width: 90px;
}
.tip_ljm{
  font-size: 12px;
    color: #999;
    line-height: 22px;
    margin-left: 10px;
}
.shopOrder-dialog{
  height: auto;
  max-height: 750px;
  overflow-y: auto;
  .editor{
    width: 500px;
  }
}
.shopOrder-dialog::-webkit-scrollbar{display:none}
</style>
